<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>VUE</title>
</head>
<body>
    <div id='app'>
    	{{ message }}
    </div>
    <div id='app-2'>
    	<span v-bind:title='message'>
    		hello my name is wenhua;
    	</span>
    </div>
    <div id="app-3">
    	<p v-if="seen"> Now you see me</p>
    </div>
    <div id="app-4">
    	<div class="static"  v-bind:class="{active:isActive,'text-danger':hasError}">
        </div>
    </div>
    <div id="app-5">
    	<div v-bind:class='classObject'></div>
    </div>
   <!--  <div id="app-6">
    	<div v-bind:class="[isActive?activeClass:'',errorClass"></div>
    </div> -->
    <div id="app-7">
    	<div v-bind:class="[activeClass,errorClass]"></div>
    </div>
    <div id="app-8">
    	<my-component class='baz boo'></my-component>
    </div>
    <div id="example">
    	<my-component></my-component>
    </div>
    <div id='app-9'>
    	<div v-bind:style="{color:activeColor,fontSize:fontSize+'px'}">hello world!</div>
    </div>
    <div id='app-10'>
    	<div v-bind:style="styleObject">hello vue!</div>
    </div>
    <template v-if="loginType === 'username'">
    	<label>Username</label>
    	<input placeholder="enter your username">
    </template>
    <template v-else>
    	<label>email</label>
    	<input placeholder="enter your email address">
    </template>
	<script src='vue.js'></script>
	<script type='text/javascript'>
		var app = new Vue({
			el: '#app',
			data:{
				message:'hello vue!'
			}
		})
	</script>
	<script type='text/javascript'>
		var app2 = new Vue({
			el:'#app-2',
			data:{
				message:'you loaded this page on' + new Date()
			}
		})
	</script>
	<script type='text/javascript'>
		var app3 = new Vue({
			el:'#app-3',
			data:{
				seen:true
			}
		})
	</script>
	<script>
		var data = {a:1}
		var vm = new Vue({
			data: data
		})
		// console.log(vm.a);
		// console.log(data.a);
	    data.a = 3;
	    console.log(vm.a);
	</script>
	<script type='text/javascript'>
		var vm = new Vue({
			data:{
				a:1
			},
			created: function(){
				console.log('a is' + this.a)
			}
		})
	</script>
	<script type="text/javascript">
		// var app4 = new Vue({
		// 	el:'#app-4',
		// 	data:{
		// 		isActive:true,
		// 		hasError:true
		// 	}
		// })
		// var app5 = new Vue({
		// 	el:'#app-5',
		// 	data: {
  //                 classObject:{
  //                 	active: true,
  //                 	'text-danger': true
  //                 } 
		// 	}
		// })
		var app5 = new Vue({
			el:'#app-5',
			data: {
                isActive: true,
                error: null 
			},
			computed:{
				classObject:function () {
					return {
						active:this.isActive &&  !this.error,
						'text-danger':this.error && this.type === "fatal"
					}
				}
			}
		})
	</script>
	
	<script type="text/javascript">
		var app7 = new Vue({
			el:'#app-7',
			data: {
				activeClass: 'active',
				errorClass: 'text-danger'
			}
		})
	</script>
	
	<script type="text/javascript">
       var MyComponent = Vue.extend({
       	  template:'<div>a custom component!</div>'
       })
        Vue.component('my-component',MyComponent)
       new Vue({
       	el: '#example'
       })
	</script>
	<script type="text/javascript">
		var app9 = new Vue({
			el:'#app-9',
			data: {
                activeColor:'red',
                fontSize:30
			}
		})
	</script>
	<script type="text/javascript">
		var app10 = new Vue({
			el:'#app-10',
			data: {
				styleObject: {
					color: 'red',
					fontSize: '18px'
				}
			}
		})
	</script>
</body>
</html>

